<template>
  <div>
    <div>
      <!-- 导航栏 -->
      <van-tabs v-model="active" swipeable>
        <van-icon name="arrow-left" class="at" @click="syt()" />
        <van-tab v-for="index in aee" :title="index" :key="index">
          <div v-if="index === '出售'">
            <!-- 上部筛选框 -->
            <van-dropdown-menu>
              <van-dropdown-item v-model="value" :options="option" />
              <van-dropdown-item
                v-model="value1"
                :options="option1"
                @change="hy()"
              />
              <!-- 筛选 -->
                 <van-dropdown-item title="筛选" ref="item">
                <div>
                  <div class="gyu">商品</div>
                    <van-checkbox-group v-model="result"   direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in akk"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                    </van-checkbox-group>
                </div>
                <div>
                    <div class="gyu"> 类型</div>             
        <van-checkbox-group v-model="result1"   direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in axx"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                    </van-checkbox-group>
                </div>
                <div>
                    <div class="gyu">价格</div>             
        <van-checkbox-group v-model="result2"   direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in ass"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                    </van-checkbox-group>
                </div>
                <div>
                    <div class="gyu">邮费</div>             
        <van-checkbox-group v-model="result3"   direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in agg"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                    </van-checkbox-group>
                </div>
                <div>
                    <div class="gyu">交易方式</div>             
        <van-checkbox-group v-model="result4"   direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in add"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                    </van-checkbox-group>
                </div>
                <div>
                  <van-button type="default" class="jhu">默认按钮</van-button>
                  <van-button type="primary" class="jhu">主要按钮</van-button>
                </div>
              </van-dropdown-item>
            </van-dropdown-menu>
            <div class="aju" >
              <div @click="by()" v-for="(ing,inc) in ads" :key="inc" >
                <img :src="ing.picture" alt="" class="k" /><br />
                <div>{{ing.summary}}</div>
                <div>￥{{ing.price}}</div>
                <div class="content1-user-all">
                  <!-- 头像 -->
                  <div @click="htg(ing.id)">
                    <van-image
                      round
                      width="5rem"
                      height="5rem"
                      src="http://img.yzcdn.cn/vant/cat.jpeg"
                    />
                  </div>
                  <!-- 用户信息 -->
                  <div class="content1-user-infor">
                    <div @click="htg()">
                      <span>用户名</span>
                      <span>用户等级</span>
                    </div>
                    <span>用户时间</span> <span>{{ing.cityName}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="yans" @click="tz()">发出售</div>
          </div>
          <div v-if="index === '求购'">
            <!-- 上部筛选框 -->
            <van-dropdown-menu>
              <van-dropdown-item v-model="valuea" :options="optiona" />
              <van-dropdown-item v-model="value3" :options="option3" />
              <van-dropdown-item title="筛选" ref="item">
                    <div>
                  <div class="gyu">商品</div>
                    <van-checkbox-group v-model="result5"   direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in akk1"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                      {{result5}}
                    </van-checkbox-group>
                </div>
                <div>
                    <div class="gyu"> 类型</div>             
        <van-checkbox-group v-model="result6"   direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in axx1"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                    </van-checkbox-group>
                </div>
                <div>
                    <div class="gyu">价格</div>             
        <van-checkbox-group v-model="result7"   direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in ass1"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                    </van-checkbox-group>
                </div>
                <div>
                    <div class="gyu">邮费</div>             
        <van-checkbox-group v-model="result8"   direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in agg1"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                    </van-checkbox-group>
                </div>
                <div>
                    <div class="gyu">交易方式</div>             
        <van-checkbox-group v-model="result9"  direction="horizontal">
                      <van-checkbox
                        v-for="(i, n) in add1"
                        :key="n"
                        :name="i.text"
                        class="ytr1"
                        >{{ i.text }}</van-checkbox
                      >
                    </van-checkbox-group>
                </div>
                <div>
                  <van-button type="default" class="jhu">默认按钮</van-button>
                  <van-button type="primary" class="jhu">主要按钮</van-button>
                </div>
                 </van-dropdown-item>
                 <div v-for="(lin,shu) in ads1" :key="shu" @click="by1()">
                   <div><h2>标题</h2></div>
                   <div><h3>详情</h3></div>
                   <div><span>标签</span><span>标签</span></div>
              <!-- 用户的信息 -->
              <div class="content1-user-all" >
                <!-- 头像 -->
                <div  @click="htg()">
                  <van-image
                    round
                    width="5rem"
                    height="5rem"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                  />
                </div>
                <!-- 用户信息 -->
                <div class="content1-user-infor">
                  <div>
                    <span>{{lin.id}}</span>
                  </div>
                  <span>用户时间</span> <span>{{lin.cityName}}</span>
                </div>
                <span>带价私聊</span>
              </div>
              </div>
            </van-dropdown-menu>
      <div class="yans" @click="tz1()">发求购</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      // 复选框接收选中的
      result:['全部 '],
      result1:[' 全部'],
      result2:[' 全部  '],
      result3:[' 全 部'],
      result4:[' 全部   '],
      result5:['全部  '],
      result6:['  全部'],
      result7:['  全部'],
      result8:['全 部'],
      result9:['全部   '],
      active: '',
      ads:[],
      ads1:[],
      aee: ['出售', '求购'],
      value: 0,
      value1: 'a',
      valuea: 'A',
      value3: 'a',
      switch1: false,
      switch2: false,
      // 下拉框的选择
      option: [
        { text: '全国', value: 0 },
        { text: '本省', value: 1 },
        { text: '同城', value: 2 },
      ],
       optiona: [
        { text: '全国', value: 'A' },
        { text: '本省', value: 'B' },
        { text: '同城', value: 'C' },
      ],
      option1: [
        { text: '最新发布', value: 'a' },
        { text: '价格最低', value: 'b' },
        { text: '留言最多', value: 'c ' },
      ],
      option3: [
        { text: '最新发布', value: 'a' },
        { text: '价格最低', value: 'b' },
        { text: '留言最多', value: 'c ' },
      ],
      // 商品
      akk: [
        { text: '全部 ', pwd: true },
        { text: '全新', pwd: false },
        { text: '九九新', pwd: false },
        { text: '九成新', pwd: false },
        { text: '八成新', pwd: false },
        { text: '七成新', pwd: false },
        { text: '六成新', pwd: false },
        { text: '其他 ', pwd: false },
      ],
      akk1: [
        { text: '全部  ', pwd: true},
        { text: '全新 ', pwd: false },
        { text: '九九新 ', pwd: false },
        { text: '九成新 ', pwd: false },
        { text: '八成新 ', pwd: false },
        { text: '七成新 ', pwd: false },
        { text: '六成新 ', pwd: false },
        { text: '其他  ', pwd: false },
      ],
      // 类型
      axx: [
        { text: ' 全部', pwd: false },
        { text: '鱼竿', pwd: false },
        { text: '钓箱钓椅', pwd: false },
        { text: '干包鱼护', pwd: false },
        { text: '抄网支架', pwd: false },
        { text: '鱼线', pwd: false },
        { text: '浮漂', pwd: false },
        { text: '鱼钩', pwd: false },
        { text: '夜钓灯', pwd: false },
        { text: '打包整套', pwd: false },
        { text: '其他', pwd: false },
      ],
        axx1: [
        { text: '  全部', pwd: false },
        { text: '鱼竿 ', pwd: false },
        { text: '钓箱钓椅 ', pwd: false },
        { text: '干包鱼护 ', pwd: false },
        { text: '抄网支架 ', pwd: false },
        { text: '鱼线 ', pwd: false },
        { text: '浮漂 ', pwd: false },
        { text: '鱼钩 ', pwd: false },
        { text: '夜钓灯 ', pwd: false },
        { text: '打包整套 ', pwd: false },
        { text: ' 其他', pwd: false },
      ],
      // 价格1
      ass: [
        { text: ' 全部  ', pwd: false },
        { text: '不议价 ', pwd: false },
        { text: '可交换 ', pwd: false },
      ],
      // 价格2
      ass1: [
        { text: '  全部', pwd: false },
        { text: '带价私聊', pwd: false },
        { text: '价钱好说', pwd: false },
      ],
      // 交易方式
      add: [
        { text: ' 全部   ', pwd: false },
        { text: '同城交易 ', pwd: false },
        { text: '自提 ', pwd: false },
        { text: '邮寄 ', pwd: false },
      ],
       add1: [
        { text: '全部   ', pwd: false },
        { text: '同城交易', pwd: false },
        { text: '自提', pwd: false },
        { text: '邮寄', pwd: false },
      ],
      // 
      agg:[
        { text: ' 全 部', pwd: false },
        { text: ' 包邮   ', pwd: false },
        { text: ' 自费', pwd: false },
      ],
       agg1:[
        { text: '全 部', pwd: false },
        { text: '包邮   ', pwd: false },
        { text: '自费', pwd: false },
      ]
    };
  },
  // 向后台请求
  mounted() {
    axios.post('/api/cusedlist', {}).then((res1) => {
      console.log(res1.data.data);
      var syy = []
      syy = res1.data.data
      for(var i = 0;i<syy.length;i++ ){
        if(syy[i].userType === '1'){
          this.ads.push(syy[i]);
        } else if(syy[i].userType === '2'){
          this.ads1.push(syy[i])
        }
      }
      console.log(this.ads1)
    });
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    hy(f) {
      console.log(5);
      event.stopPropagation();
    },
    // 返回上一级
    syt() {
      this.$router.push({
        name: 'forum',
      });
    },
    by(){
       this.$router.push({
        name:'二手商品',
          query:{
          b:'出售'
        }
      })
    },
     by1(){
       this.$router.push({
        name:'二手商品',
          query:{
          b:'求购详情'
        }
      })
    },
    htg(){
      event.stopPropagation(),
      this.$router.push({
        name:'名片',
      })
    },
    tz(){
      this.$router.push({
        name:'求购',
        query:{
          ku:'出售',
          op:1
        }
      })
    },
    tz1(){
      this.$router.push({
        name:'求购',
           query:{
          ku:'求购',
          op:2
        }
      })
    }
  },
};
</script>
<style scoped>
.at {
  position: absolute;
  top: 1rem;
  left: 0.4rem;
  font-size: 1.8rem;
}
/* 照片大小 */
.k {
  width: 15rem;
}
/* 个人名片 */
.content1-user-all {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  padding-bottom: 1rem;
}
/* 选项的大小 */
.ytr1{
  width: 7.8rem;
  margin-bottom: 1rem;
}
/* 筛选字体的样式 */
.gyu{
  font-size: 1.7rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 0.8rem;
}
/* 按钮的样式 */
.jhu{
  width: 18rem;
  margin-left: 0.5rem;
}
/* 商品图鉴的样式 */
.aju{
  display: flex;
  justify-content: space-evenly;
}
.yans{
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: rgba(52, 52, 138, 0.534);
  line-height: 5rem;
  text-align: center;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  }
</style>